<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>


          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
			  当前位置：<router-link to="/index" style="color: #409eff;">分销后台</router-link>>
          <router-link to="/myDistributor" style="color: #409eff;">我的分销商</router-link>>
          分销商分销商品列表
          </div>
          <div class="hei10"></div>


				<div class="title">分销商分销商品列表</div>

				<div v-loading="loading" style="margin: 20px 0;">
					<div class="list">
						<div class="th">商品名称</div>
						<div class="th">商品编码</div>
						<div class="th">所属产品渠道</div>
						<div class="th" style="border-right: 0;">创建时间</div>

					</div>
					<div class="list" v-for="item in list" :key="item.id">
						<div class="td name"  @click="godetail(item.id)">{{item.title}}</div>
						<div class="td">{{item.fetch_code}}</div>
						<div class="td" v-if="item.my_page_id == item.product_shop_id">{{item.product_name}}</div>
						<div class="td" v-if="item.my_page_id != item.product_shop_id">{{item.parent_title}}</div>
						<div class="td" style="border-right: 0;">{{item.created_at}}</div>
					</div>
					<el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<!-- <foot></foot> -->
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'

	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'myDistributorshop',
		data(){
			return{
				msg:"",
				id:"",
				loading:true,
				search:"",
				log:false,
				money:"",
				total:0,
				pagesize:20,
				page:1,
				list:"",
                shop_id:""
			}
		},
		created() {

			this.getlist();

		},
		methods:{

			//翻页
			fanye:function(page){
				this.loading = true
				this.page = page
				this.getlist()
			},

			godetail:function(id){
				window.open(window.location.origin +  window.location.pathname+"#/productionDelivery/shopdetail?id="+id)
			},

			//获取分销商
			getlist:function(){
                this.search = this.search.trim()
				var that = this;
				axios.get('/api/plan-market/merchant/products?merchant_id='+this.$route.query.id+'&page='+this.page+'&page_size='+this.pagesize)
					.then(response => {
						if(response.data.msg.code == 0){
							that.list = response.data.data.data
							that.total = response.data.data.total
							that.loading = false
						}else{
							if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//复制
			copy:function(){
				const input = document.createElement('input');
				document.body.appendChild(input);
				input.setAttribute('value', window.location.host+'/#/register?supplier_id='+this.shop_id);
				input.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
					this.$message({
					  message: '复制成功',
					  type: 'success'
					});
				}
				document.body.removeChild(input);
			},
			//搜索
			searchgo:function(){
                this.page = 1
				this.loading = true
				this.getlist()
			},
			loggo:function(){

			}
		}

	}
</script>

<style lang="scss" scoped>
	.index{

				.title{border-bottom: 1px #EAEAEA solid;  line-height: 45px; padding-left: 30px; font-size: 16px; background: #F9F9F9; color: #727272;}
				.add{
					padding: 20px 30px; text-align: right; position: relative;
					.input-with-select{ width: 280px;}
					.el-button{ position: absolute; right: 30px; top: 20px; padding: 10px 20px;}
				}
				.list{
					display: flex; text-align: center; color: #727272; line-height: 45px; margin: 0 20px; border: 1px #EAEAEA solid; margin-top: -1px;
					.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid;  }
					.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid;
						.el-button{
							a{ color: #409EFF;}
							&:hover{
								a{ color: #FFF;}
							}
						}


					}
					.name{ cursor: pointer;
							&:hover{
								color: #197CFF;
							}
						}
				}
				.el-pagination{ text-align: right; margin: 20px 0}
				.my{
					display: flex; justify-content: space-between; padding: 20px; line-height: 20px;
					.myid{
						font-size: 17px; color: #DD2727; padding-left: 10px;
						span{ color: #B1B1B1; font-size: 14px; margin-left: 20px}
					}
					.invitation{
						font-size: 14px; color: #B1B1B1;
						span{ color: #197CFF; cursor: pointer;}
					}
				}

	}
</style>
